<template>
  <div class="todo-item" :style="finished ? {opacity: .5} : {}">
    <div
      class="todo-priority"
      :style="{ backgroundColor: priorityColor }"
    ></div>
    <div class="todo-success">
      <el-checkbox :checked="finished" @change="setFinished" />
    </div>
    <div class="todo-item-body" @click="$emit('click',{id,priority,title,remarks,finished,tags,time,leader,type})">
      <div class="todo-item-user" v-if="leader">
        <span :style="{ backgroundColor: priorityColor }">
          <i v-if="!leader.icon" class="el-icon-user-solid" :style="{backgroundColor:userIconColor}" />
          <img v-else :src="leader.icon" />
            {{leader.name}}
          </span >
      </div>
      <div class="todo-item-title">
        <div class="todo-item-title-text">
          <span
            :style="{ color:priorityColor, fontWeight: 'bold', marginRight:'5px' }"
          >[{{typeTitle}}]</span><span v-html="title" :style="finished ? {textDecoration:'line-through'} : {}"></span>
        </div>
        <div class="todo-item-title-time">
          <span>{{ timeFormat }}</span>
        </div>
      </div>
      <div class="todo-item-remarks" v-if="remarks != ''">{{ remarks }}</div>
      <div class="todo-item-tags" v-if="tags.length > 0">
        <span :style="{backgroundColor:priorityColor}" v-for="(tag, i) in tags" :key="i">{{ tag }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {DateDiff} from '@util/dateUtil.js'
export default {
  model:{
    methods:["setFinished"]
  },
  props: {
    id:String,
    priority: { type: String, default: "4" },
    title: { type: String, default: "" },
    remarks: { type: String, default: "" },
    finished: { type: Boolean, default: false },
    tags: { type: Array, default:()=> [] },
    time: { type: [Date,String], default:'2021-01-22 20:00'},
    leader: {
      type: Object,
      validator: (val) => {
        if (!val.hasOwnProperty("name") || !val.hasOwnProperty("id")) {
          console.error(
            "组件TodoItem的属性leader必须包含id、name属性,当前是:" , val
          );
          return false;
        }
        return true
      },
    },
    type: {
      type: String,
      validator: (val) => {
        if (["task", "todo", "system", "approval"].indexOf(val) < 0) {
          console.error(
            "组件TodoItem的属性type只能是'task','todo','system','approval',当前是:" +
              val
          );
          return false;
        }
        return true;
      },
    },
  },
  computed: {
    priorityColor() {
      switch (this.priority) {
        case "1":
          return "#F56C6C";
        case "2":
          return "#E6A23C";
        case "3":
          return "#67C23A";
        case "4":
          return "#909399";
        default:
          return "#909399";
      }
    },
    typeTitle(){
      switch (this.type) {
        case "task":
          return "任务";
        case "todo":
          return "待办";
        case "system":
          return "系统";
        case "approval":
          return "审批";
        default:
          return "待办";
      }
    },
    userIconColor() {
      switch (this.priority) {
        case "1":
          return "#FAB3B3";
        case "2":
          return "#EFC381";
        case "3":
          return "#93D572";
        case "4":
          return "#B7B9BD";
        default:
          return "#B7B9BD";
      }
    },
    icon() {
      switch (this.type) {
        case "task":
          return "iconfont icon-task";
        case "todo":
          return "el-icon-bell";
        case "system":
          return "el-icon-star-off";
        case "approval":
          return "iconfont icon-approval";
        default:
          return "iconfont icon-task";
      }
    },
    timeFormat() {
      const now = new Date();
      const diff = DateDiff(now,this.time)
      if (diff == 0) {
        if(now.getDate()-this.time.getDate()==1){
          return '昨天'
        }else{
          return this.$moment(this.time).format("HH:mm");
        }
      } else if (diff == 1) {
        if(now.getDate()-this.time.getDate()==2){
          return '前天'
        }else{
          return '昨天'
        }
      } else if (diff == 2) {
        if(now.getDate()-this.time.getDate()==2){
          return '更早'
        }else{
          return '前天'
        }
      } else if (diff > 2) {
        return "更早";
      } else if (diff <1) {
        const d = Math.abs(diff)
        if (d>30 && d<365){
          return parseInt(d/30)+'月后'
        }else if (d>365){
          return parseInt(d/365)+'年后'
        }else{
          return d+'天后'
        }
      }
    },
  },
  data(){
    return {
      isFinished:this.finished
    }
  },
  methods:{
    setFinished(){
      this.$emit('setFinished',this.id,!this.finished)
    }
  }
};
</script>

<style lang="less" scoped>
.todo-item {
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  margin-bottom: 10px;
  margin-top: 20px;
}
.todo-item:hover{
  box-shadow: #C0C4CC 0px 0px 5px 3px;
}
.todo-priority {
  width: 5px;
  flex: 0 0 5px;
  border-radius: 5px 0px 0px 5px;
  justify-content: start;
}
.todo-success {
  width: 30px;
  flex: 0 0 30px;
  justify-content: start;
  text-align: center;
  margin-top: 12px;
}
.todo-item-body {
  width: 100%;
  margin-top: 10px;
  justify-content: end;
  padding: 5px;
  cursor: pointer;
}
.todo-item-title {
  display: flex;
  height: 20px;
  line-height: 20px;
}
.todo-item-title-text {
  width: 100%;
  color:#303133;
  overflow: hidden;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
}
.todo-item-title-time {
  width: 60px;
  flex: 0 0 60px;
  text-align: center;
  span {
    font-size: 12px;
    color: #fff;
    background-color: #aaa;
    padding: 0px 10px;
    border-radius: 10px;
  }
}
.todo-item-remarks {
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  color: #aaa;
  overflow: hidden;
}
.todo-item-tags {
  height: 20px;
  overflow: hidden;
  font-size: 12px;
  line-height: 20px;
  span {
    margin-right: 5px;
    font-size: 12px;
    color: #fff;
    background-color: #409eff;
    padding: 0px 10px;
    border-radius: 10px;
  }
}
.todo-item-user {
  text-align: left;
  height: 0px;
  cursor: pointer;
  span {
    position: relative;
    top: -25px;
    left: -20px;
    font-size: 12px;
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    i {
      margin-right: 5px;
      border-radius: 8px;
      padding: 3px;
    }
    img {
      margin-right: 5px;
      border-radius: 8px;
      height:17px;
      width:18px;
      position: relative;
      top:4px;
    }
  }
}
</style>
